<template>
  <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { gaode_vector, gaode_image } from "../gis_layers/gaode";
import { app } from "../main";
onMounted(() => {
  const map = new ol.Map({
    target: "map",
    /* 设置地图图层 */
    layers: [gaode_image, gaode_vector],
    /* view设置地图 以坐标,中心点,放大级别 */
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 8,
      //经纬度坐标系
      projection: "EPSG:4326",
    }),
  });
  app.provide("$map", map);
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#map {
  width: 100vw;
  height: 100vh;
}
</style>
